<template>
  <div class="header-box" :class="{ mobile: isMobile }">
    <!-- index page -->
    <h5 v-if="isIndexRoute" class="title">最新文章</h5>
    <!-- category -->
    <h5 v-else-if="currentCategory" :key="`category-${currentCategory.slug}`" class="title">
      当前分类 :
      <span>{{ currentCategory.name || '...' }}</span>
    </h5>

    <!-- tag -->
    <h5 v-else-if="currentTag" :key="`tag-${currentTag.slug}`" class="title">
      当前标签 :
      <span>{{ currentTag.name }}</span>
    </h5>

    <!-- search -->
    <h5 v-else-if="currentKeyword" :key="`search-${currentKeyword}`" class="title">
      <span>
        <span>和</span>
        <span>&nbsp;"</span>
        <span>{{ currentKeyword }}</span>
        <span>"&nbsp;</span>
        <span>有关的所有文章</span>
      </span>
    </h5>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useEnhandle } from '@/enhandle';
export default {
  name: "ArticleListHeader",
  setup() {
    const { route, store, isMobile } = useEnhandle()
    const isIndexRoute = computed(() => {
      return route.name === "index"
    })

    const currentTag = computed(() => {
      return store.state.tag.data.find((tag, index, arr) => {
        return Object.is(tag.slug, route.params.tag_slug);
      });
    })
    const currentCategory = computed(() => {
      return store.state.category.data.find((category, index, arr) => {
        return Object.is(category.slug, route.params.category_slug);
      });
    })

    const currentKeyword = computed(() => {
      return route.params.keyword;
    })

    return {
      isIndexRoute,
      currentTag,
      currentCategory,
      currentKeyword,
      isMobile
    }
  }
};
</script>

<style lang="scss" scoped>
.header-box {
  position: relative;
  color: $text;
  @keyframes logo-animate {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    33% {
      opacity: 0.8;
      transform: scale(0.9) rotateY(0deg);
    }
    66% {
      opacity: 0.8;
      transform: scale(0.9) rotateY(360deg);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  > .title {
    margin: 0;
    text-transform: capitalize;
  }
}
</style>
